<template>
  <CardVue
    height="2.4rem"
    title="登记管理"
    style="margin-bottom: 0.3rem; margin-top: 0.1rem"
  >
    <div class="grid">
      <div class="grid-item" @click="open('登记注册', {})">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d1.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">登记注册</div>
          <div class="grid-item-r-tx">
            {{ info.v1.alls }}
          </div>
        </div>
      </div>
      <div class="grid-item" @click="open('已注销', { logout: 1 })">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d2.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">已注销</div>
          <div class="grid-item-r-tx">
            {{ info.v1.logout }}
          </div>
        </div>
      </div>
      <div class="grid-item" @click="open('登记注册', { logout: 2 })">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d3.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">已撤销</div>
          <div class="grid-item-r-tx">
            {{ info.v1.back }}
          </div>
        </div>
      </div>
      <div class="grid-item" @click="open('登记在册', { logout: 0 })">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d4.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">登记在册</div>
          <div class="grid-item-r-tx">
            {{ info.v1.uses }}
          </div>
        </div>
      </div>
      <div class="grid-item" @click="open('登记在册', { types: 1 })">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d5.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">社会团体</div>
          <div class="grid-item-r-tx">
            {{ info.v1.st }}
          </div>
        </div>
      </div>
      <div class="grid-item" @click="open('登记在册', { types: 0 })">
        <div class="grid-item-img">
          <img src="@/assets/imgs/largeScreen/icon/d6.svg" alt="" />
        </div>
        <div class="grid-item-r">
          <div class="grid-item-r-title">民办非企业</div>
          <div class="grid-item-r-tx">
            {{ info.v1.mf }}
          </div>
        </div>
      </div>
    </div>
  </CardVue>
  <PopupCancelled ref="PopupCancelledRef" />
</template>
<script setup lang="ts">
import CardVue from '@/views/largeScreen/components/card/card.vue'
import { dpcont } from '@/api/spotCheck/spotCheck'
import { onMounted, ref } from 'vue'
import PopupCancelled from '../../components/popup-cancelled/popup-cancelled.vue'

interface Info {
  v1: {
    alls: number
    logout: number
    back: number
    uses: number
    st: number
    mf: number
  }
  v2: {
    one: number
    two: number
    three: number
  }
  v3: {
    one: number
    two: number
    three: number
  }
  v4: {
    one: number
    two: number
    three: number
  }
  v5: {
    one: number
    two: number
    three: number
  }
  v6: {
    one: number
    two: number
    three: number
  }
  v7: {
    one: number
    two: number
    three: number
  }
}

const info = ref<Info>({
  v1: {
    alls: 0,
    logout: 0,
    back: 0,
    uses: 0,
    st: 0,
    mf: 0
  },
  v2: {
    one: 0,
    two: 0,
    three: 0
  },
  v3: {
    one: 0,
    two: 0,
    three: 0
  },
  v4: {
    one: 0,
    two: 0,
    three: 0
  },
  v5: {
    one: 0,
    two: 0,
    three: 0
  },
  v6: {
    one: 0,
    two: 0,
    three: 0
  },
  v7: {
    one: 0,
    two: 0,
    three: 0
  }
})

onMounted(() => {
  dpcont().then((res) => {
    info.value = res.data
  })
})

const PopupCancelledRef = ref()
const open = (title, parameter) => {
  PopupCancelledRef.value.show(title, parameter)
}
</script>

<style scoped lang="scss">
.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  box-sizing: border-box;
  padding: 10px 0;
  .grid-item {
    width: 100%;
    display: flex;
    cursor: pointer;
    .grid-item-img {
      width: 0.6rem;
      height: 0.55rem;
      border: 2px solid rgba(60, 247, 255, 0.65);
      border-radius: 0.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #154f85;
      img {
        width: 0.3rem;
        height: 0.3rem;
      }
    }
    .grid-item-r {
      flex: 1;
      margin-left: 0.1rem;
      .grid-item-r-title {
        color: rgba(255, 255, 255, 0.647058823529412);
        font-size: 0.15rem;
        font-family: Arial;
        font-weight: 400;
        margin-bottom: 0.05rem;
      }
      .grid-item-r-tx {
        color: #fff;
        font-size: 0.3rem;
        font-family: Arial;
        font-weight: 700;
        span {
          color: rgba(255, 255, 255, 0.647058823529412);
          font-size: 0.15rem;
        }
      }
    }
  }
}
</style>
